<template>
  <p-form-model
    :model="form"
    :rules="rules"
    layout="inline"
    style="margin-top: 20px"
  >
    <p-form-model-item label="客户简称">
      <p-input v-model="form.customerName" placeholder="请输入" />
    </p-form-model-item>
    <p-form-model-item label="Model Name">
      <p-input v-model="form.modelName" placeholder="请输入" />
    </p-form-model-item>
    <p-form-model-item label="机种">
      <p-input v-model="form.modelInfoName" placeholder="请输入" />
    </p-form-model-item>
    <!-- <p-form-model-item label="客户简称">
      <p-input v-model="form.customerCode" placeholder="请输入" />
    </p-form-model-item> -->
    <p-form-model-item label="应用别">
      <SelectDefault
        v-model="form.application"
        code="application"
        :get-popup-container="(triggerNode) => triggerNode.parentNode"
        :allow-clear="false"
        :has-all="false"
      />
    </p-form-model-item>
    <p-form-model-item label="形态">
      <SelectDefault
        v-model="form.appearance"
        code="shape"
        :allow-clear="false"
        :get-popup-container="(triggerNode) => triggerNode.parentNode"
        :has-all="false"
      />
    </p-form-model-item>
    <p-form-model-item label="生产地">
      <SelectDefault
        v-model="form.manufactureArea"
        code="production_place"
        :get-popup-container="(triggerNode) => triggerNode.parentNode"
        :allow-clear="false"
        :has-all="false"
      />
    </p-form-model-item>
    <p-button type="primary" class="btn-search" @click="handleSearch">
      搜索
    </p-button>
    <p-button @click="handleReset">重置</p-button>
    <p-button v-if="hasExport" class="btn-export" @click="handleExport">
      导出
    </p-button>
  </p-form-model>
</template>
<script>
const defaultForm = {
  modelName: '',
  modelInfoName: '',
  customerName: '',
  application: '',
  appearance: '',
  manufactureArea: '',
};
export default {
  props: {
    saleGroupOptions: {
      type: Array,
      default: () => [],
    },
    hasExport: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      form: {
        ...defaultForm,
      },
    };
  },
  methods: {
    handleSearch() {
      this.$emit('search', this.form);
    },

    handleReset() {
      this.form = { ...defaultForm };
      this.$emit('search', this.form);
    },
  },
};
</script>

<style lang="less" scoped>
.poros-form {
  box-sizing: border-box;
  background-color: #f7f7f8;
  padding: 10px;
  padding-bottom: 0px;
  width: 100%;
}
.poros-form-item {
  width: 27%;
  margin-bottom: 10px;
}
/deep/ .poros-form-item-control-wrapper {
  width: calc(100% - 90px);
}
/deep/ .poros-form-item-label {
  width: 90px;
}
.btn-search {
  margin-right: 16px;
}
.btn-export {
  margin-left: 16px;
}
</style>
